<template>
    <div class="WsyjDiseaseIncreaseTrend">

        <div class="gvChart-title">
            <div :class="[!isActive?'active':'unActive']" @click="setClassTwo">累计</div>
            <div :class="[isActive?'active':'unActive']" @click="setClassOne">新增</div>
        </div>
        <div class="gvChart-content" id="WsyjDiseaseIncreaseTrend">

        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from 'vue-property-decorator';
    import {ZhtsServer} from '@/api/installServer';

    @Component({
        // 组件名
        name: 'WsyjDiseaseIncreaseTrend',
        // 依赖那些组件
        components: {}
        // 其他待定
    })
    export default class WsyjDiseaseIncreaseTrend extends Vue {

        public data?: any;
        private gvChart?: any;
        private isActive: boolean = true;
        private districtCode: string = '000000';
        // private title:string = '全国疫情趋势图';

        // 生命周期顺序
        public mounted() {
            // 加载统计组件模板
            gv.config.ChartTemplate.load();
            this.createGVChart();
        }

        @Watch('$store.state.ZhtsModule.district')
        private getDistrict() {
            this.districtCode = this.$store.state.ZhtsModule.district.id;
            this.createGVChart();
        }

        // @Watch('$store.state.ZhtsModule.district.shortName')


        public setClassOne() {
            this.isActive = true;
            this.createGVChart();
        }

        public setClassTwo() {
            this.isActive = false;
            this.createGVChart();
        }

        private createGVChart() {
            const dom = document.getElementById('WsyjDiseaseIncreaseTrend');
            const url = '/ncov/common/patient_area_history_info';
            const type = this.isActive ? "new_newdebt" : "confirmed_debt";
            const that = this;
            ZhtsServer.getConfig(url, {area_id: this.districtCode, days: 7, types: type}).then((result: any) => {
                if (
                    result.status === 200 &&
                    result.data
                ) {
                    that.data = result.data;
                    const source = new gv.source.SimpleSource(
                        that.gvChartDataConvert(that.data)
                    );
                    this.gvChart = new gv.chart.AreaLineChart(source, dom);
                    this.setStyle();
                    this.gvChart.render();
                }
            });
        }

        private setStyle() {
            const alias = this.isActive ? ["新增确诊", "新增疑似"] : ["累计确诊", "累计疑似"];
            this.gvChart.config('grid', {
                left: 46,
                right: 35,
                bottom: 40
            });
            this.gvChart.config('xAxis', {
                name: "日期",
                nameGap: 12,
                nameTextStyle: {
                    color: '#fff'
                },
                axisLabel: {
                    color: '#ffffff'
                },
                splitLine: {show: false},
                axisLine: {
                    symbol: ['none', 'arrow'],
                    symbolSize: [5, 10],
                    symbolOffset: [0, 10],
                    lineStyle: {
                        color: '#0ff'
                    }
                },
                axisTick: {
                    show: true,
                    inside: true,
                    length: 2,
                    lineStyle: {
                        width: 2,
                        color: '#0ff'
                    }
                }
            });
            this.gvChart.config('yAxis', {
                name: "人数",
                nameTextStyle: {
                    color: '#fff'
                },
                axisLabel: {
                    color: '#fff'
                },
                splitLine: {show: false,},
                axisLine: {
                    show: true,
                    symbol: ['none', 'arrow'],
                    symbolSize: [5, 10],
                    symbolOffset: [0, 10],
                    lineStyle: {
                        color: '#0ff'
                    }
                },
                axisTick: {
                    show: true,
                    inside: true,
                    length: 2,
                    lineStyle: {
                        width: 2,
                        color: '#0ff'
                    }
                }
            });
            this.gvChart.config('legend', {
                top: 10,
                itemHeight: 10,
                itemWidth: 16,
                textStyle: {
                    color: '#ffffff'
                }
            });
            this.gvChart.config('tooltip', {
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderColor: '#0ff',
                borderWidth: 1,
                borderRadius: 0,
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#0ff'
                    }
                },
                textStyle: {
                    color: '#0ff',
                },
                formatter: function (val: any[]) {
                    const data = val[0].data;
                    const keys = Object.keys(data);
                    if (val.length === 1) {
                        if (val[0].seriesIndex) {
                            return val[0].name + '<br>'
                                + val[0].seriesName + '人数: <label style="color:rgb(238,130,64)">'
                                + val[0].data[keys[2]] + '</label>';
                        } else {
                            return val[0].name + '<br>'
                                + val[0].seriesName + '人数: <label style="color:rgb(206,54,54)">'
                                + val[0].data[keys[1]] + '</label><br>'
                        }
                    } else {
                        return val[0].name + '<br>'
                            + val[0].seriesName + '人数: <label style="color:rgb(206,54,54)">'
                            + val[0].data[keys[1]] + '</label><br>'
                            + val[1].seriesName + '人数: <label style="color:rgb(238,130,64)">'
                            + val[1].data[keys[2]] + '</label>';
                    }
                }
            });
            this.gvChart.config('series[0]', {
                name: alias[0],
                lineStyle: {
                    color: 'rgb(206,54,54)'
                },
                itemStyle: {
                    color: 'rgb(206,54,54)'
                },
                areaStyle: {
                    opacity: 0.7,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: 'rgb(206,54,54)'},
                            {offset: 0.8, color: 'rgba(206,54,54,0)'},
                        ]
                    },
                },
                symbolSize: 1,
                emphasis: {
                    itemStyle: {
                        borderColor: '#0ff',
                        borderWidth: 2,
                        shadowColor: '#0ff',
                        shadowBlur: 4
                    }
                }
            });
            this.gvChart.config('series[1]', {
                name: alias[1],
                lineStyle: {
                    color: 'rgb(238,130,64)'
                },
                itemStyle: {
                    color: 'rgb(238,130,64)'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: 'rgb(238,130,64)'},
                            {offset: 0.8, color: 'rgba(238,130,64,0)'},
                        ]
                    },
                }
            });
        }

        private gvChartDataConvert(json: any[]) {
            const chartData = new gv.data.ChartData();
            const names = Object.keys(json[0]);

            for (let i = 0; i < json.length; i += 2) {
                const chartItem = new gv.data.ChartItem();

                const NameEty = new gv.data.ChartEntry();
                NameEty.name = names[0];
                NameEty.value = json[i][names[0]];
                chartItem.addEntry(NameEty);

                const valueEty1 = new gv.data.ChartEntry();
                valueEty1.name = names[1];
                valueEty1.value = json[i][names[1]];
                chartItem.addEntry(valueEty1);

                const valueEty2 = new gv.data.ChartEntry();
                valueEty2.name = names[2];
                valueEty2.value = json[i + 1][names[1]];
                chartItem.addEntry(valueEty2);

                chartData.addItem(chartItem);
            }
            return chartData;
        }
    }
</script>

<style scoped lang="less">
    .WsyjDiseaseIncreaseTrend {
        height: 60%;
        width: 100%;


    }

    .gvChart-title {
        padding-right: 4px;
        height: 28px;
        margin-top: -24px;

        div {
            display: inline-block;
            float: right;
            margin-right: 2px;
            padding: 2px 12px;
            cursor: pointer;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background-size: 100% 100%;

            &:hover {
                background: url('../../assets/img/zhts/yqqs-btn-active.png') no-repeat 0 0;
            }
        }
    }

    .gvChart-content {
        height: 90%;
    }

    .active {
        background: url('../../assets/img/zhts/yqqs-btn-active.png') no-repeat 0 0;
    }

    .unActive {
        background: url('../../assets/img/zhts/yqqs-btn.png') no-repeat 0 0;
    }


</style>
